<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>验证后台手机</title>
<link rel="stylesheet" href="__HOME__/css/public_style.css">
<style>
	title{background:url(__HOME__/img/yanzheng_bg.jpg) no-repeat fixed;background-size:cover;color:#fff;}
	::-webkit-input-placeholder {color:#fff;} /* WebKit, Blink, Edge */
	:-moz-placeholder {color:#fff;} /* Mozilla Firefox 4 to 18 */
	::-moz-placeholder {color:#fff;} /* Mozilla Firefox 19+ */
	:-ms-input-placeholder {color:#fff;} /* Internet Explorer 10-11 */
	html,body{height:100%;background-color:#fff;}
		/*-- 返回 --*/
	.ding_bg{
		height:52px;
		background-image: -moz-linear-gradient( 0deg, rgb(26,85,203) 0%, rgb(110,119,255) 100%);
		background-image: -webkit-linear-gradient( 0deg, rgb(26,85,203) 0%, rgb(110,119,255) 100%);
		background-image: -ms-linear-gradient( 0deg, rgb(26,85,203) 0%, rgb(110,119,255) 100%);
	}
	.ding_bg>p{text-align:center;color:#fff;float:left;width:calc(100% - 104px);line-height:52px;}
	.fanhui{padding:20px;height:12px;width:12px;display:block;float:left;}
	.fanhui>div{border-top:2px solid #fff;border-left:2px solid #fff;height:10px;width:10px;transform:rotate(-45deg);}
	/*-- 返回 --*/
	.chaxun_box{padding:16px;height:40px;line-height:40px;position:relative;}
	.chaxun_box>input{display:block;border-radius:12px;height:40px;width:100%;text-indent:20px;border:none;background-color:#dfe0ee;box-shadow:0 0 10px 0 rgba(0,0,0,.2) inset;outline:none;}
	.chaxun_box>button{display:block;background:url(__HOME__/img/fangdajin.png) no-repeat;width:60px;height:40px;background-size:60px 40px;position:absolute;right:16px;top:16px;border:none;}
	
	/*-- 手机表单 --*/
	.shouji_biaodan{padding:0 16px;height:calc(100% - 88px);overflow:auto;}
	.shouji_biaodan>table{font-size:12px;color:#666;border:2px solid #d2d2d2;width:100%;text-align:center;line-height:30px;border-collapse:collapse;}
	.shouji_biaodan>table th{font-size:16px;border:1px solid #d6d5d6;}
	.shouji_biaodan>table td{border:1px solid #d6d5d6;}
	.shouji_biaodan>table tr>td:nth-of-type(3){color:#8e6aaa;}
	/*-- 手机表单 --*/
	
</style>
</head>
<body>
	<div class="ding_bg">
		<a href="javascript:history.go(-1);" class="fanhui"><div></div></a>
		<p>历史记录</p>
		<h6 class="clearfix"></h6>
	</div>
	<form action="" class="chaxun_box">
		<input type="text" id="call" placeholder="输入手机号">
		<button type="button" id="serch"></button>
	</form>
	<div class="shouji_biaodan">
		<table>
			<tr>
				<th>时间</th>
				<th>手机号</th>
				<th>公交卡号</th>
			</tr>
			{foreach $data as $v}
			<tr>
				<td>{$v['time']}</td>
				<td>{$v['phone']|substr_replace = ###,'****', 3, 4}</td>
				<td>{$v['icnum']}</td>
			</tr>
			{/foreach}
		</table>
	</div>
</body>
<script src="__HOME__/js/jquery-3.3.1.js"></script>
<script>

	$('#serch').click(function(){

		var call = $('#call').val();

		if(call == ''){
			location.reload();
			return false;
		}

		var html = '<tr><th>时间</th><th>手机号</th><th>公交卡号</th></tr>'

		$.post('/index/check/sephone',{phone:call},function(msg){

			if(msg){
				$.each(msg,function(i,eve){
					html += '<tr>';
					html += '<td>'+eve['time']+'</td>';
					html += '<td>'+eve['phone']+'</td>';
					html += '<td>'+eve['icnum']+'</td>';
					html += '</tr>';
				});

				$('table').html(html);
			}else{

				alert('没有找到相关内容');
			}

		})
	});

</script>
</html>
